<template>
	<!-- 其它 -->
	<view class="extra">
		<uni-list>
			<uni-list-item class="pic" title="头像" @click="chooseImg" link>
				<template v-slot:footer>
					<image class="slot-image" :src="imgArr"></image>
				</template>
			</uni-list-item>
			<uni-list-item title="昵称" @click="showNicknamePopup" link>
				<template v-slot:footer>
					<text> {{user.nickname}}</text>
				</template>
			</uni-list-item>
			<uni-list-item showArrow title="生日" link>
				<template v-slot:footer>
					<view>
						<!-- 日期选择器 -->
						<!-- 	<picker mode="date" :value="user.birthday" start="1900-01-01" end="2040-12-31"
							@change="onBirthdayChange">
							<view class="picker">{{ user.birthday || '请选择生日' }}</view>
						</picker> -->
						<picker mode="date" fields="year-month" :value="user.birthday" @change="onBirthdayChange"
							start="1800-01-01" end="2200-12-31" bindchange="startDateChange">
							<view class="picker">{{ user.birthday || '请选择生日' }}</view>
						</picker>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showArrow title="性别" link>
				<template v-slot:footer>
					<view>
						<picker mode="selector" :range="genderOptions" @change="onChangeGender">
							<view class="picker">
								{{ user.sex  || '请选择性别'}}
							</view>
						</picker>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showArrow title="简介" link>
						<template v-slot:footer>
					<text>一句话介绍自己</text>
				</template>
			</uni-list-item>
			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputNickname" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" :value="user.nickname"
						placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
		</uni-list>

	</view>

</template>
<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				nickname: '', // 用户昵称
				imgArr: "../../static/avatar.png",
				dateValue: '', // 存储选中的日期
				type: 'center',
				åuser: {
					nickname: '默认昵称' // 用户昵称
				},
				// 假设这里有一个初始的日期值，或者留空让用户选择
				birthday: '',
				gender: '男',
				genderOptions: ['男', '女'],
				provinces: [ // 省份数据
					{
						value: 'zhejiang',
						name: '浙江省'
					},
					{
						value: 'jiangsu',
						name: '江苏省'
					},
				],
				cities: [], // 城市数据，初始为空
				selectedProvince: null,
				selectedCity: '' // 选中的城市
			}
		},
		methods: {
			...mapMutations(['saveUserInfo']),
			// 选择图片
			chooseImg() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						if (tempFilePaths.length > 0) {
							// 更新页面的渲染
							this.imgArr = tempFilePaths[0]
							// 上传图片
							this.uploadAvatar()
						}
					}
				})
			},
			//处理性别选择器
			onChangeGender(e) {
				this.user.sex = this.genderOptions[e.detail.value];
				this.updateUser({
					sex: this.user.sex
				})
			},
			//显示昵称对话框
			showNicknamePopup() {
				this.$refs.inputNickname.open()
			},
			// 处理生日选择器的变化
			onBirthdayChange(e) {
				// e.detail.value 是用户选择的日期
				this.user.birthday = e.detail.value;
				this.updateUser({
					birthday: this.user.birthday
				})
			},
			//修改用户昵称
			dialogInputConfirm(val) {
				this.user.nickname = val
				this.updateUser({
					nickname: val
				})
			},
			//上传用户头像
			async uploadAvatar() {
				const data = await this.$api.user.uploadAvatar(this.imgArr)
				const userInfo = uni.getStorageSync("userInfo")
				this.imgArr = this.$store.state.url + data
				userInfo.avatarUrl = data
				this.saveUserInfo(userInfo)
			},
			/**
			 * 修改用户信息
			 * @param {Object} params
			 */
			async updateUser(params) {
				const userInfo = uni.getStorageSync("userInfo")
				params.id = userInfo.id
				const {
					status,
					data,
					msg
				} = await this.$api.user.updateUser(params)
				if (status != 200) {
					uni.$u.toast("操作失败!")
					// const userInfo = uni.getStorageSync("userInfo")
					// userInfo.nickname = params.nickname != undefined ? params.nickname : userInfo.nickname
					// userInfo.birthday = params.birthday != undefined ? params.birthday : userInfo.birthday
					// userInfo.sex = params.sex != undefined ? params.sex : userInfo.sex
					// this.user = userInfo
					// this.saveUserInfo(userInfo)
					this.imgArr = this.$store.state.url + this.$store.state.userInfo.avatarUrl
					this.user = this.$store.state.userInfo
				}
			},
		},
		onLoad() {
			this.imgArr = this.$store.state.url + this.$store.state.userInfo.avatarUrl
			this.user = this.$store.state.userInfo
		}
	}
</script>

<style scoped lang="less">
	.extra {
		width: 100%;
		height: 100%;

		.pic {
			width: 100%;
			height: 100%;

			.slot-image {
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}
		}

		//弹出昵称
		.popup-content {
			padding: 20px;
		}

		.popup-contenta {
			@include flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 200px;
			background-color: #fff;

			.popup-footer {
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 40upx;
				padding: 1px;
				line-height: 40upx;
				border-bottom: 1px solid #f3f3f3;
			}
		}

		.popup-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
		}

		.popup-buttons button {
			width: 48%;
		}

		.slot-image {
			width: 100%;
			/* 根据需要调整 */
			height: 100px;
			/* 根据需要调整 */
			object-fit: cover;
		}


	}
</style>